<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>编辑文章</title>
        <link rel="stylesheet" href="{{ assert(path='admin/component/pear/css/pear.css') | safe }}" />
        <style>
        #fileName {
            display: inline-block;
            width: 235px;
            margin-bottom: 10px;
        }
        </style>
    </head>

    <body>
    <form class="layui-form" action="">
        <div class="mainBox">
            <div class="main-container">
                <div class="main-container">
                    <div class="layui-form-item">
                        <label class="layui-form-label">父级分类</label>
                        <div class="layui-input-block">
							<select name="cate_id" lay-verify="">
								<option value="0">作为顶级分类</option>
                                {% if cate_list %}
                                    {% for cate_item in cate_list %}
                                        {% if data.cate_id == cate_item.id %}
                                            <option value="{{ cate_item.id }}" selected>{{ cate_item.name }}</option>
                                        {% else %}
                                            <option value="{{ cate_item.id }}">{{ cate_item.name }}</option>
                                        {% endif %}
                                    {% endfor %}
                                {% endif %}
							</select>
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" value="{{ data.title }}" 
                                lay-verify="title" autocomplete="off" 
                                placeholder="请输入标题" class="layui-input">
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label">内容</label>
                        <div class="layui-input-block">
                            <textarea name="content" placeholder="请输入内容" id="content" class="layui-textarea js-content">{{ data.content }}</textarea>
                        </div>
                    </div>   
    
                    <div class="layui-form-item">
                        <label class="layui-form-label">简介</label>
                        <div class="layui-input-block">
                            <textarea name="brief" placeholder="请输入简介" class="layui-textarea">{{ data.brief }}</textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">关键字</label>
                        <div class="layui-input-block">
                            <input type="text"  name="keywords" value="{{ data.keywords }}" 
                                lay-verify="title" autocomplete="off" 
                                placeholder="请输入关键字" class="layui-input">
                        </div>
                    </div>
    
                    <div class="layui-form-item">
                        <label class="layui-form-label">描述</label>
                        <div class="layui-input-block">
                            <textarea name="description" placeholder="请输入描述" class="layui-textarea">{{ data.description }}</textarea>
                        </div>
                    </div>
    
                    <div class="layui-form-item">
                        <label class="layui-form-label">封面</label>
                        <div class="layui-input-block">
                            <input id="fileName" value="{{ data.cover }}" type="text" lay-verify="fileName" autocomplete="off" class="layui-input" disabled>
                    
                            <input id="credential_hide" name="cover" value="{{ data.cover }}" type="hidden" autocomplete="off" class="layui-input">
                            
                            <button id="upload_img" type="button" hidden></button>
                            <button class="layui-btn" id="preview_img" type="button">
                                选择图片
                            </button>
                            <button class="layui-btn layui-btn-normal" 
                                disabled="disabled"
                                type="button" 
                                id="upload_img_save">
                                上传
                            </button>

                            <div class="layui-collapse" lay-accordion="" style="width: 399.5px">
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">展开图片</h2>
                                    <div class="layui-colla-content" id="colla_img">
                                        {% if data.cover %}
                                            <a href="{{ data.cover }}" target="_blank">
                                                <img id="showImg" src="{{ data.cover }}" width="370px">
                                            </a>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
     
                    <div class="layui-form-item">
                        <label class="layui-form-label">标签</label>
                        <div class="layui-input-block">
                            <input type="text" name="tags" value="{{ data.tags }}" 
                                lay-verify="title" autocomplete="off" 
                                placeholder="请输入标签" class="layui-input tags-item">
                        </div>
                    </div>
    
                    <div class="layui-form-item">
                        <label class="layui-form-label">文章来源</label>
                        <div class="layui-input-block">
                            <input type="text" name="from" value="{{ data.from }}" 
                                lay-verify="title" autocomplete="off" 
                                placeholder="请输入文章来源" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">发布时间</label>
                        <div class="layui-input-block">
                            <input type="text" name="add_time" 
                                value="{{ data.add_time | date(format='%Y-%m-%d %H:%M:%S', timezone='Asia/Shanghai') }}" 
                                lay-verify="title" autocomplete="off" 
                                placeholder="请输入发布时间" class="layui-input add_time">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">置顶</label>
                        <div class="layui-input-block">
                            {% if data.is_top == 1 %}
                                <input type="radio" name="is_top" value="1" title="是" checked>
                                <input type="radio" name="is_top" value="0" title="否">
                            {% else %}
                                <input type="radio" name="is_top" value="1" title="是">
                                <input type="radio" name="is_top" value="0" title="否" checked>
                            {% endif %}
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-block">
                            {% if data.status == 1 %}
                                <input type="radio" name="status" value="1" title="启用" checked>
                                <input type="radio" name="status" value="0" title="禁用">
                            {% else %}
                                <input type="radio" name="status" value="1" title="启用">
                                <input type="radio" name="status" value="0" title="禁用" checked>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="art-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="pear-btn pear-btn-sm">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </div>
    </form>

    <script src="{{ assert(path='admin/component/layui/layui.js') | safe }}"></script>
    <script src="{{ assert(path='admin/component/pear/pear.js') | safe }}"></script>
    <script>
    layui.extend({
        tagsinput: 'tagsinput/tagsinput',
    }).use(['form', 'jquery', 'tinymce', "tagsinput", 'laydate', 'upload'],function(){
        let form = layui.form;
        let $ = layui.jquery;
        var tinymce = layui.tinymce;
        var laydate = layui.laydate;
        var upload = layui.upload;

        var edit = tinymce.render({
            elem: "#content",
            toolbar: true,
            menubar: true,
            height: 400,
            form: {
                name: 'file',
            },
            images_upload_url: "{{ url_for(name='admin.upload-image') | safe }}",
            success: function(res, succFun, failFun) {
                if (res['code'] == 0) {
                    succFun(res['data'][0]['url']);
                } else {
                    failFun(res['message']);
                }
            },
        });
        edit.on("change", function() {
            edit.save();
        });
            
        // 标签输入
        var elem = ".tags-item";
        var tags = $(elem);
        tags.tagsInput({
            width: 'auto',
            defaultText: '输入后回车确认',
            minInputWidth: 110,
            height: 'auto',
            placeholderColor: '#999',
            onChange: function (row) {
                $(elem + "_addTag").focus();
            }
        });

        laydate.render({
            elem: ".add_time",
            trigger: 'click',
            type: 'datetime'
        });

        // 上传图片
        upload.render({
            elem: '#preview_img' , 
            url: "{{ url_for(name='admin.upload-image') | safe }}", 
            size: 50 * 1024, 
            auto: false, //不自动上传
            bindAction: '#upload_img', //上传绑定到隐藏按钮
            choose: function (obj) {
                $("#upload_img_save").removeAttr('disabled');

                obj.preview(function (index, file, result) {
                    $('#fileName').val(file.name); //展示文件名
                    $('#colla_img').find('img').remove();
                    $('#colla_img').append('<a href="#"><img id="showImg" src="' + result + '" width="370px"></a>');
                });
            }, 
            done: function (res) {
                if (res['code'] == 0) {
                    layer.msg(res['message']);

                    $('#credential_hide').val(res['data'][0]['url']);
                } else {
                    layer.msg(res['message'], {icon: 5});
                }
            }, 
            error: function (index, upload) {
                layer.msg('上传失败！' + index, {icon: 5});
            }
        }); 

        $('#upload_img_save').click(function () {
            $(this).attr({'disabled': 'disabled'});
            $('#upload_img').click();
        });
        
        form.on('submit(art-save)', function(data) {
            $.ajax({
                url: "{{ url_for(name='admin.art-update') | safe }}?id={{ data.id }}",
                data: data.field,
                dataType: 'json',
                type: 'post',
                success: function(result) {
                    if (result.code == 0) {
                        layer.msg(result.message, {icon:1,time:1000}, function() {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            parent.layui.table.reload("art-table");
                        });
                    } else {
                        layer.msg(result.message, {icon:2,time:1000});
                    }
                }
            });

            return false;
        });
    })
    </script>
    </body>
</html>
